<template>
  <div class="chart-quantity-and-growth-tooltip">
    <div class="u-period">{{ period }}</div>
    <div class="u-row">
      <div class="u-circle"></div>
      <div class="u-label">{{ quantityLabel }}：</div>
      <div class="u-value">{{ quantityValue }}</div>
    </div>
    <div class="u-row">
      <div class="u-circle"></div>
      <div class="u-label">{{ growthLabel }}：</div>
      <div class="u-value">{{ growthValue }}%</div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  period: String,
  quantityLabel: String,
  quantityValue: [String, Number],
  growthLabel: String,
  growthValue: [String, Number],
})
</script>

<style lang="stylus" scoped>
.chart-quantity-and-growth-tooltip
  .u-period
    padding-bottom 7px
    margin-bottom 7px
    color: #27243f;
    font-size: 15px;
    border-bottom 1px solid rgba(0,0,0,.06)
  .u-row
    display flex
    align-items center
    .u-circle
      width: 9px;
      height: 9px;
      border-radius: 9px;
      background: linear-gradient(90deg,#4fa9eb,#87d4f7);
      margin-right: 9px;
    .u-label
      font-size: 15px;
    .u-value
      font-size: 17px;
      font-weight: bold;
</style>
